<template>
	<view class="box">
		<view style="margin-bottom:32rpx;">uni-app预览文件</view>
		<view v-for="(item,index) in fileList" :key="index">
			<!-- <view style="word-break: break-all;">{{item.src}}</view> -->
			<button class="previewBtn" @click="toPage(item)">{{item.name}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				fileList: [{
						type: '1',
						name: '预览图片',
						src: ['https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg',
							'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg'
						]
					},
					{
						type: '2',
						name: '预览文档',
						src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
					},
					{
						type: '3',
						name: '预览视频',
						src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
					},
          {
            type: '4',
            name: 'base 64 pdf',
            src: 'xxdsadsadada',
          },
				]
			};
		},
		onLoad(options) {},
		methods: {
			toPage(item) {
				if (item.type === '2') { //预览文档
					//#ifdef MP-WEIXIN
					//微信小程序预览文档可以直接打开，不用跳转页面
					this.previewWechat(item.src)
					return
					//#endif
				}
				uni.navigateTo({
					url: '/pages/preview?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
			previewWechat(urlPdf) {
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.downloadFile({
					url: urlPdf,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		padding: 20rpx 40rpx;

		.previewBtn {
			height: 60rpx;
			width: 200rpx;
			border-radius: 16rpx;
			background-color: #409eff;
			color: #fff;
			line-height: 60rpx;
			margin: 24rpx 12rpx;
		}
	}
</style>